import React, {useEffect} from 'react';
import {Chart} from '@antv/g2';

const MyColumnForMethod = ({data}) => {
    useEffect(() => {
        const chart = new Chart({container: 'methodContatiner'});

        chart.options({
            type: 'interval',
            data: data,
            encode: {x: 'genre', y: 'sold', color: 'genre'},
            autoFit: true,
            axis: false,
            height: 90,
            marginBottom: 0,
            tooltip: (data) => ({
                name: `${data.genre}`,
                value: `${data.sold}个`,
            }),
        });

        chart.render();

        // Cleanup function to destroy the chart instance when the component is unmounted
        return () => {
            chart.destroy();
        };
    }, [data]);

    return <div id="methodContatiner"/>;
};

export default MyColumnForMethod;
